<template>
  <div class="form-designer-left-side" data-role="field-container" :class="width?'has-width':'no-width'">
    <span class="icon iconfont left-collapse" :class="[width?'icon-doubleleft':'icon-doubleright', 'icon-left-colapse']" @click="width=!width"></span>
    <a-tabs v-model="active">
      <a-tab-pane tab="组件" key="component"/>
      <a-tab-pane tab="数据域" key="domain"/>
    </a-tabs>
    <div style="height: calc(100% - 44px); overflow: auto">
      <FieldContainer v-show="active === 'component'"/>
      <FieldDomain @selectedChange="selectedChange"
                   :selectedField="selectedField" @removed="removed"
                   :formDefinition="formDefinition" v-show="active === 'domain'"/>
    </div>
  </div>
</template>
<script>
import FieldContainer from '@/components/hhd/design/FormDesigner/field/FieldContainer.vue';
import FieldDomain from '@/components/hhd/design/FormDesigner/field/FieldDomain.vue';
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';

export default {
  name: 'FormDesignerLeftSide',
  components: {FieldDomain, FieldContainer},
  model: createModelForVue('formDefinition'),
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    selectedField: createProps(String),
  },
  data() {
    return {
      width: true,
      active: 'component'
    };
  },
  methods: {
    removed() {
      this.$nextTick(() => {
        this.$emit('rebind');
      })
    },
    selectedChange(id) {
      this.$emit('selectedChange', id)
    },
  }
};
</script>
<style scoped>
  .left-collapse{
    position: absolute;
    background: white;
    color: dodgerblue;
    font-size: 18px;
    width: 25px;
}
.has-width{
  position: relative;
}
.no-width{
  position: relative;
  width: 0;
}
</style>
